<template>
    <div class="flex">
        
        <div class="flex-1 p20">
            <!-- search -->
            <el-form :inline="true">
                <el-form-item label="类型">
                    <el-select v-model="search.type" @change="getListData" placeholder="请选择">
                        <el-option label="全部" value=""> </el-option>
                        <el-option label="彩金" value="game_coupon"> </el-option>
                        <el-option label="公司" value="game_company"> </el-option>
                        <el-option label="小猴说事" value="posts"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker v-model="search.timeRange" type="datetimerange" @change="transformTimeRange" placeholder="选择时间范围"> </el-date-picker>
                </el-form-item>
            </el-form>

            <!-- 列表 -->
            <div v-for="item in listData" class="pb15 ui-border-bottom">
                <p class="f-color-grey f12">
                    <span >[{{item.type_intro}}]</span>
                    <span class="f-color-grey pl20">{{item.bengin_time}}</span>
                </p>
                <div class="clamp-1 mb10">{{item.comment_content}}</div>
                <div class="f10">
                    <span class="mr50">对 <i class="f-color-orange cursor-pointer" @click="goDetails(item.post_id)">{{item.name}}</i> 的评论</span>
                    <span class="mr50 f-color-text">获取{{item.score}}积分</span>
                    
                </div>
            </div>

            <!-- 分页 -->
            <div class="text-center mt15">
                <el-pagination
                @current-change="getListData"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="prev, pager, next, jumper"
                :total="pageTotal">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                search:{
                    type:'',
                    timeRange:[],
                    timeBeginStr:'',
                    timeEndStr:''
                },
                currentPage:0,
                pageSize:7,
                pageTotal: 0,
                listData:[]
            }
        },
        methods:{
            getListData(){
                this.$http.get('index.php?g=home&m=Comments&a=user_comments', {
                    params:{
                        page_no:this.currentPage,
                        page_size:this.pageSize,
                        table:this.search.type,
                        begin_date:this.search.timeBeginStr,
                        end_date:this.search.timeEndStr
                    }
                })
                .then(({data})=>{
                    console.log(data)
                    if (data.code===1) {
                        this.listData = data.data
                        this.pageTotal = parseInt(data.total)
                    }else{
                        this.$message.error(data.msg)
                    }
                })
            },
            goDetails(id){
                this.$router.push({
                    name:'彩金详情',
                    query:{
                        id:id
                    }
                })
            },
            transformTimeRange(v){
                if (v) {
                    let str = v.split(' - ')
                    this.search.timeBeginStr = str[0]
                    this.search.timeEndStr = str[1]

                    this.getListData()
                }
            }
        },
        mounted(){
            this.currentPage = 1
        },
    }
</script>